<script src="../ExternalLibrary/js/vue.js"></script>

<!-- ----------------------------01.v-for遍历数组/对象 start--------------------------- -->
<fieldset>
    <legend>01.v-for遍历数组/对象(当前项的索引)</legend>
    <div id="forID">
        <li v-for="(stu,inde) in stus" v-bind:key="stu.inde"><!-- key是为了提高性能用的。vue需要把数据和DOM组件对应起来提高性能。所以必须有一个固定不变的东西,比如ID,如果不提供,vue会给出默认的 -->
            <p>{{school}}——{{inde}}——{{stu.name}}</p>
        </li>
    </div>

    <script>
        var vm = new Vue({
            el:"#forID",
            data:{
                school:"高三三班",
                stus:[
                    {name:"张三"},
                    {name:"李四"},
                    {name:"王五"}
                ]
            }
        })
    </script>
</fieldset>
<!-- ----------------------------01.v-for遍历数组/对象 end--------------------------- -->

<!-- ----------------------------02.数组/对象不能响应式处理的情况 start--------------------------- -->
<fieldset>
    <legend>02.数组不是响应式的</legend>
    <div id="arrID">
        <div v-for="arr in arrs">
            {{arr}}
        </div>
    </div>
    <script>
        var oArr = new Vue({
            el:"#arrID",
            data:{
                arrs:[
                    2,3,6,9,10
                ]
            }
        })

        oArr.arrs[0]=100;//在这里改变数组的值,vue不能响应处理(JS限制)
        console.log(oArr.arrs[0]);

        /***
         * 这里存在两个不能响应的问题:
         *      1:利用索引设置数组项
         *      2:修改数组的长度
         * */
    </script>
</fieldset>
<!-- ----------------------------02.数组/对象不能响应式处理的情况 end--------------------------- -->


<!-- ----------------------------03.v-for既可以接受整数也可以接受函数 start--------------------------- -->
<fieldset>
    <legend>03.v-for既可以接受整数也可以接受函数</legend>
    <div id="const">
        <span v-for="n in 10">{{ n }} </span>
    </div>
    <script>
        // vue提供的指令必须挂在在vue实例上
        var oConst = new Vue({
            el:"#const"
        })
    </script>
</fieldset>
<!-- ----------------------------03.v-for既可以接受整数也可以接受函数 start--------------------------- -->